<template>
    <div class="message-center">
        <!-- 显示暂无数据 -->
        <div v-if="alteringRequests.length === 0" class="no-data">暂无数据</div>

        <div v-for="(request, index) in alteringRequests" :key="index">
            <div class="request-info">
                <div class="request-header">
                    <p>学生姓名: {{ request.request.student_name }}</p>
                    <p>原班级名称: {{ request.request.student_class_name }}</p>
                </div>
                <div class="request-details">
                    <p>修改后的班级名称: {{ findDetailInfo(request.details, 'class_id') }}</p>
                    <p>是否为班委: {{ findDetailInfo(request.details, 'com_member_type') }}</p>
                </div>
                <div class="button-container">
                    <el-button type="primary" @click="confirmAltering([request.request.id])">同意</el-button>
                </div>
            </div>
            <el-divider v-if="index < alteringRequests.length - 1" class="request-separator"/>
        </div>
    </div>
</template>

<script>
import { ref, onMounted } from "vue";
import axios from 'axios';
import { ElMessage } from 'element-plus';

export default {
    name: "MessageCenter",
    setup() {
        const alteringRequests = ref([]);

        onMounted(async () => {
            try {
                const response = await axios.get('/api/v1/manager/get_altering_requests');
                if (response.data.code === 200) {
                    alteringRequests.value = response.data.data;
                }
            } catch (error) {
                console.error('获取修改申请失败:', error);
            }
        });

        const findDetailInfo = (details, key) => {
            const detail = details.find(d => d.new_field_key === key);
            return detail ? detail.new_field_info : '未修改';
        };

        const confirmAltering = async (requestIds) => {
            try {
                console.log(requestIds)
                const response = await axios.post(`/api/v1/manager/confirm_altering_requests`, { request_ids: requestIds });
                console.log('Response:', response);
                if (response.data.code === 200) {
                    ElMessage.success('申请已确认');
                    alteringRequests.value = alteringRequests.value.filter(request => !requestIds.includes(request.request.id));
                } else {
                    ElMessage.error('确认申请失败');
                }
            } catch (error) {
                console.error('确认申请失败:', error);
                ElMessage.error('确认申请失败');
            }
        };

        return {
            alteringRequests,
            findDetailInfo,
            confirmAltering,
        };
    },
};
</script>

<style scoped>
.message-center {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.request-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #fff;
}

.request-header, .request-details {
    margin-bottom: 10px;
}

.request-header p, .request-details p {
    text-align: left;
}

.button-container {
    display: flex;
    justify-content: center; /* 居中对齐 */
}

.request-separator {
    margin: 10px 0;
}

.no-data {
    font-size: 16px;
    color: #666;
    text-align: center;
}
</style>